<template>
  <view class="rateCardWrapper">
    <view class="rateCardContent">
      <view class="title" v-if="isConsultant"
        >客户 {{ share.userName }}
        <span>{{
          isResult == false ? "还未填写服务反馈" : "给你的服务反馈"
        }}</span></view
      >
      <view class="title-forUser" v-else
        >{{ estimateContext }}
        <view class="consultant-info">
          <image class="consultant-header" :src="consultantHeaderImg" />
          <view class="basic-info">
            <view class="name"> {{ consultantName }}</view>
            <view>
              {{ itemInfo.payTime }}完成了<span>{{
                itemInfo.rightProducts
              }}</span
              >服务</view
            >
          </view>
        </view>
      </view>
      <view class="line"></view>
      <view class="rateTitleRow">
        <view class="rateTitleCol"></view>
        <view class="rateTitleCol">很不满</view>
        <view class="rateTitleCol">不满</view>
        <view class="rateTitleCol">一般</view>
        <view class="rateTitleCol">满意</view>
        <view class="rateTitleCol">很满意</view>
      </view>
      <view
        class="rateContentRow"
        v-for="(item, index) in rateList"
        :key="item.rateType"
      >
        <view class="rateContentCol">{{ item.rateName }}</view>
        <view
          class="rateContentCol"
          v-for="(iconItem, iconIndex) in item.iconList"
          :key="index + iconIndex"
        >
          <img
            :src="iconItem"
            class="rateContentIcon"
            @click="handleRateIconClick(item, index, iconItem, iconIndex)"
          />
        </view>
      </view>
      <view class="line"></view>
      <view class="comments">
        <view v-if="!isConsultant" class="feed-back-title"> 我要反馈 </view>
        <view
          v-if="!isConsultant && finishServeClicked == false"
          class="quick-input"
        >
          <view
            @click="quickInputHandleClick(item)"
            v-for="(item, index) in quickInputList"
            :class="[
              item.isClicked ? 'quick-input-item-actived' : 'quick-input-item',
            ]"
            :key="index"
            >{{ item.name }}</view
          >
        </view>
        <view>
          <textarea
            class="content"
            :disabled="!(!isConsultant && finishServeClicked == false)"
            v-model="comments"
            :placeholder="textPlaceHolder"
          ></textarea>
          <view v-if="!isConsultant && finishServeClicked == false">
            <u-upload
              :action="uploadAction"
              :fileList="fileList1"
              @on-remove="deletePic($event, item)"
              @on-success="handleUploadSuccess($event, item)"
              name="1"
              multiple
              :maxCount="3"
              uploadText="上传照片"
              :previewFullImage="true"
              :deletable="finishServeClicked == false"
            >
            </u-upload>
          </view>
          <view
            v-else-if="resultImgList.length > 0 || finishServeClicked == true"
            class="result-img-container"
          >
            <image
              v-for="(item, index) in resultImgList"
              :key="index"
              :src="resultImgList[index]"
              class="result-image"
              @click="clickImg(item)"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  addConsultantRateDetail,
  getConsultantRate,
} from "@/api/modules/career.js";

import {
  addOrderRateDetail,
  getOrderRateDetail,
} from "@/api/modules/orderManage.js";
import { uploadAction } from "@/api/index";
export default {
  name: "zhituRateCard",
  props: {
    //share里面包含了很多信息
    share: {
      type: Object,
      default: () => {},
    },
    isConsultant: {
      type: Boolean,
      default: false,
    },
    finishServeClicked: {
      type: Boolean,
      default: false,
    },
    isResult: {
      type: Boolean,
      default: false,
    },
    consultantName: {
      type: String,
      default: "1",
    },
    payTime: {
      type: String,
      default: "2",
    },
    itemInfo: {
      type: Object,
      default: () => {},
    },
    rateListFromParent: {
      type: Array,
      default: [],
    },
  },
  watch: {
    finishServeClicked: {
      handler(val) {
        if (val) {
          this.resultImgList = this.fileList1;
        }
      },
      immediate: true,
      deep: true,
    },
    consultantName: {
      handler(val) {},
      immediate: true,
      deep: true,
    },
    payTime: {
      handler(val) {},
      immediate: true,
      deep: true,
    },
    itemInfo: {
      handler(val) {
        console.log("itemInfo发生了变化", this.itemInfo);
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      estimateContext: "您对顾问满意吗？", //
      resultImgList: [],
      uploadAction,
      imgList: [], //上传图片
      quickInputList: [
        { name: "服务质量", isClicked: false },
        { name: "服务亮点", isClicked: false },
        { name: "解决的问题", isClicked: false },
      ],
      consultantInfo: {
        name: "向海波",
      },
      orderInfo: {
        time: "2020年4月6日 20:20:46",
        serviceName: "简历优化",
      },
      consultantHeaderImg:
        "https://img200.yl1001.com/resume-profile/2024/04/27/d96e220b-f25c-4e7c-89b4-777cec5eefc0.jpg",
      comments: "",
      textPlaceHolder: "客户还未填写服务反馈",
      grayIconList: [
        this.$imgBase + "careerPath/rateOneGray.png",
        this.$imgBase + "careerPath/rateTwoGray.png",
        this.$imgBase + "careerPath/rateThreeGray.png",
        this.$imgBase + "careerPath/rateFourGray.png",
        this.$imgBase + "careerPath/rateFiveGray.png",
      ],
      colorIconList: [
        this.$imgBase + "careerPath/rateOneColor.png",
        this.$imgBase + "careerPath/rateTwoColor.png",
        this.$imgBase + "careerPath/rateThreeColor.png",
        this.$imgBase + "careerPath/rateFourColor.png",
        this.$imgBase + "careerPath/rateFiveColor.png",
      ],
      rateList: [
        {
          iconList: [
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateOneGray.png",
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateTwoGray.png",
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateThreeGray.png",
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateFourGray.png",
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateFiveGray.png",
          ],
          rateName: "服务态度",
          rateType: 10,
        },
        {
          iconList: [
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateOneGray.png",
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateTwoGray.png",
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateThreeGray.png",
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateFourGray.png",
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateFiveGray.png",
          ],
          rateName: "服务质量",
          rateType: 20,
        },
        {
          iconList: [
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateOneGray.png",
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateTwoGray.png",
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateThreeGray.png",
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateFourGray.png",
            "https://img3.job1001.com/ypMp/elan/images/careerPath/rateFiveGray.png",
          ],
          rateName: "服务效率",
          rateType: 30,
        },
      ],
      isRated: false,
    };
  },
  created() {
    // if (this.share.rateList) {
    //   this.rateList = this.share.rateList;
    //   this.rateList.forEach((item, index) => {
    //     this.$set(item, "iconList", [...this.grayIconList]);
    //   });
    // }
    if (this.isConsultant) {
      this.textPlaceHolder = "客户还未填写服务反馈";
    } else {
      this.textPlaceHolder = "我想说点什么";
    }
    // this.checkCardClickable();
  },
  mounted() {
    if (this.isResult || this.finishServeClicked == false) {
      this.getOrderRateDetailFn();
    }
    if (this.finishServeClicked == true) {
      this.getOrderRateDetailFn();
    }
  },
  watch: {
    share: {
      handler(val) {
        console.log("share", val);
      },
      deep: true,
    },
  },
  methods: {
    clickImg(item) {
      wx.previewImage({
        urls: this.resultImgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
        current: item, // 当前显示图片的http链接，默认是第一个
        success: function (res) {},
        fail: function (res) {},
        complete: function (res) {},
      });
    },
    //点击图标处理
    handleRateIconClick(item, index, iconItem, iconIndex) {
      if (this.isConsultant) {
        //顾问不能评价
        uni.showToast({
          title: "顾问不能自评！",
          icon: "none",
          duration: 1000,
        });
        return;
      }
      if (this.finishServeClicked == true) {
        return;
      }
      // if (this.isRated) {
      //   uni.showToast({
      //     title: "您已经评价过了！",
      //     icon: "none",
      //   });
      //   return;
      // }
      //处理变色，存储分数
      item.iconList.forEach((_item, _index) => {
        this.$set(item.iconList, _index, this.grayIconList[_index]);
      });
      this.$set(item.iconList, iconIndex, this.colorIconList[iconIndex]);
      item.rateScore = iconIndex + 1;
      console.log("handleRateIconClick", item);
      console.log("rateList", this.rateList);
    },
    finishEstimate() {
      console.log("这里执行了finishEstimate", this.imgList);
      //检查分数是否都填了，如果都填了就提交分数
      this.rateList.find((_item) => {
        //后端返回的有可能为0
        if (_item.rateScore == undefined || _item.rateScore <= 0) {
          uni.showToast({
            title: "请选择评分",
            icon: "none",
            duration: 2000,
          });
        }
        return _item.rateScore == undefined || _item.rateScore <= 0;
      })
        ? ""
        : this.addOrderRateDetailFn();
    },
    //请求进行评分
    async addOrderRateDetailFn() {
      this.imgList = this.imgList.join("|");
      const params = {
        personId: uni.getStorageSync("person-id").slice(2),
        orderId: this.itemInfo.orderId,
        orId: this.itemInfo.orId,
        detailList: [
          {
            ordType: 101,
            ordScore: this.rateList[0].rateScore || 1,
          },
          {
            ordType: 102,
            ordScore: this.rateList[1].rateScore || 1,
          },
          {
            ordType: 103,
            ordScore: this.rateList[2].rateScore || 1,
          },
          {
            ordType: 201,
            ordContent: this.imgList,
          },
          {
            ordType: 301,
            ordContent: this.comments,
          },
        ],
      };
      const res = await addOrderRateDetail(params);
      if (res.code == 200) {
        uni.showToast({
          title: "评价成功",
          icon: "none",
          duration: 1000,
        });
        this.isRated = true;
        this.estimateContext = "感谢您对顾问的评价~";
        this.$emit("closeEmitBtn", {});
        this.getOrderRateDetailFn();
      } else {
        uni.showToast({
          title: res.status_desc || "服务器开小差了",
          icon: "none",
          duration: 1000,
        });
      }
    },
    //用rateId检查此卡片是否已经评分过
    checkCardClickable() {
      const { consultantId, personId, rateId } = this.share;
      const params = {
        consultantId,
        personId,
        rateId,
      };
      getConsultantRate(params)
        .then((res) => {
          if (res.code == 200) {
            if (res.data.rateScore) {
              //已经评分过 所以禁用
              this.isRated = true;
              if (res.data.rateList && res.data.rateList.length) {
                this.rateList = res.data.rateList;
              }
              this.handleIconEcho();
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //回显已经选过分数的icon
    handleIconEcho() {
      this.rateList.forEach((item, index) => {
        item.iconList = this.grayIconList.map((_item, _index) => {
          if (_index == item.rateScore - 1) {
            return this.colorIconList[_index];
          } else {
            return _item;
          }
        });
      });
    },
    // 删除图片
    deletePic(data, item) {
      this.imgList.splice(data, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      console.log("url", url);
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: "https://upload.yl1001.com/upload/images/save", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            console.log("resaaaaaaa", res);
            setTimeout(() => {
              resolve(res.data.data);
            }, 1000);
          },
        });
      });
    },
    quickInputHandleClick(item) {
      item.isClicked = !item.isClicked;
      if (item.isClicked) {
        switch (item.name) {
          case "服务质量":
            this.comments = this.comments + "服务质量：" + "\n";
            break;
          case "服务亮点":
            this.comments = this.comments + "服务亮点：" + "\n";
            break;
          case "解决的问题":
            this.comments = this.comments + "解决了：" + "\n";
            break;
          default:
            break;
        }
      }
    },
    async getOrderRateDetailFn() {
      const params = {
        orId: this.itemInfo.orId,
        orderId: this.itemInfo.orderId,
      };
      const res = await getOrderRateDetail(params);
      if (res.code == 200) {
        this.rateList.forEach((item, index) => {
          this.$set(
            item.iconList,
            res.data[index].ordScore - 1,
            this.colorIconList[res.data[index].ordScore - 1]
          );
        });
        this.comments = res.data[4].ordContent;
        // let tempStr =
        //   "https://img3.job1001.com/ypMp/elan/images/careerPath/jianliyouhua.png|https://img3.job1001.com/ypMp/elan/images/careerPath/jianliyouhua.png|https://img3.job1001.com/ypMp/elan/images/careerPath/jianliyouhua.png";
        this.resultImgList = res.data[3].ordContent.split("|");
        if (this.resultImgList[0] == "") {
          this.resultImgList = [];
        }
        console.log("this.resultImgList", this.resultImgList);
        // this.resultImgList = tempStr.split("|");
      }
    },
    handleUploadSuccess(data, item) {
      let filePath = "http://img106.job1001.com/" + data;
      console.log("filePath", filePath);
      this.imgList.push(filePath);
      // this.imgList + "|" + filePath;
    },
  },
};
</script>

<style lang="scss" scoped>
.rateCardWrapper {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 16rpx;
  .rateCardTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    .rateCardTitleLine {
      // width: 160rpx;
      flex: 1;
      height: 2rpx;
      background: #d7d7d7;
    }
    .rateCardTitleText {
      height: 46rpx;
      font-size: 30rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 46rpx;
      margin: 0 38rpx;
    }
  }
  .rateCardContent {
    display: flex;
    flex-direction: column;
    .title {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 36rpx;
      color: #222222;
      width: 100%;
      height: 104rpx;
      padding: 32rpx 18rpx;
      box-sizing: border-box;
    }
    .title-forUser {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 36rpx;
      color: #222222;
      width: 100%;
      // height: 224rpx;
      padding: 32rpx 18rpx;
      box-sizing: border-box;
      .consultant-info {
        // height: 80rpx;
        display: flex;
        flex-direction: row;
        margin-top: 42rpx;
        .consultant-header {
          width: 80rpx;
          height: 80rpx;
          border: 2rpx solid #f9f9f9;
          border-radius: 50%;
        }
        .basic-info {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-between;
          color: #888888;
          margin-left: 18rpx;
          font-family: PingFangSC, PingFang SC;
          font-size: 24rpx;
          .name {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #222222;
          }
          span {
            color: #f75a3e;
            margin: 0 10rpx;
          }
        }
      }
    }
    .line {
      width: 100%;
      height: 2rpx;
      background-color: #f4f4f4;
    }
    .comments {
      width: 100%;
      // height: 394rpx;
      padding: 34rpx 18rpx 20rpx 18rpx;
      box-sizing: border-box;
      background-color: #ffffff;
      .content {
        width: 100%;
        background-color: #fafafa;
        border-radius: 16rpx;
        padding: 20rpx;
        box-sizing: border-box;
      }
      .result-img-container {
        display: flex;
        margin-top: 28rpx;
        .result-image {
          width: 220rpx;
          height: 220rpx;
          border-radius: 8rpx;
          margin-right: 10rpx;
        }
      }

      .feed-back-title {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        font-size: 30rpx;
        color: #333333;
        margin-bottom: 20rpx;
      }
      .quick-input {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20rpx;
        .quick-input-item,
        .quick-input-item-actived {
          height: 60rpx;
          border-radius: 200rpx;
          font-weight: 400;
          font-size: 28rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding: 16rpx;
          margin-right: 16rpx;
        }
        .quick-input-item-actived {
          border: 2rpx solid #f75a3e;
          background: #fff5f5;
          color: #f75a3e;
        }
        .quick-input-item {
          border: 2rpx solid #c8c8c8;
          color: #666666;
        }
      }
    }
    .rateTitleRow {
      display: flex;
      font-size: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 46rpx;
      text-align: center;
      margin-bottom: 36rpx;
      margin-top: 32rpx;
      .rateTitleCol {
        width: calc(100% / 24 * 4);

        &:nth-of-type(1) {
          width: calc(100% / 24 * 5);
        }
      }
    }
    .rateContentRow {
      display: flex;
      font-size: 30rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 46rpx;
      text-align: center;
      margin-bottom: 56rpx;
      .rateContentCol {
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(100% / 24 * 4);
        .rateContentIcon {
          width: 48rpx;
          height: 48rpx;
        }
        &:nth-of-type(1) {
          width: calc(100% / 24 * 5);
        }
      }
    }
  }
}
</style>
